<body xmlns:th="http://www.thymeleaf.org">
<h1 th:if="${emailHtml != null ? emailError == null : false }">Anomaly Report:</h1>
<div th:if="${emailError != null}">
    <h1 th:if="${emailHtml != null}">Anomaly Report ERROR:</h1>
    <label class="control-label" for="idVal"><h4>JOB ID:</h4></label>
    <div id="idVal" th:text="${jobId}"></div>
    <label class="control-label" for="errorReportTable"><h4>Details:</h4></label>
    <table id="errorReportTable" class="table table-striped table-hover table-bordered" th:attr="style=${emailHtml != null ? 'border-collapse: collapse; width: 100%;' : ''}">
        <thead>
        <tr th:attr="style=${emailHtml != null ? 'background-color: white;' : ''}">
            <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Anomaly Test Name</th>
            <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Report Time(Latest missing datapoint)</th>
            <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Job Status</th>
            <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Visualization Link</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="anomaly: ${Anomalies}" th:attr="style=${emailHtml != null ? 'background-color: #f9f9f9;' : ''}">
            <td th:text="${anomaly.getTestName()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;' : ''}">Test Name</td>
            <td th:text="${anomaly.getFormattedReportGenerationTime()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;color: rgba(240,0,0,0.8)' : ''}">Report Endtime</td>
            <td th:text="${anomaly.getStatus()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;color: rgba(240,0,0,0.8)' : ''}">Job status</td>
            <td th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;' : ''}">
                <a th:if="${anomaly.getQueryURL() != null and not #strings.isEmpty(anomaly.getQueryURL())}"
                   target="_blank" class="btn custom-report-btn" th:href="@{${anomaly.getQueryURL()}}">
                    <span class="glyphicon glyphicon-signal"></span> Dashboard
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div th:if="${emailError == null}">
    <div th:switch="${#lists.size(Anomalies) > 0}">
        <div th:case="${false}" class="alert alert-info" role="alert">No anomaly data to show!</div>
        <div th:case="${true}">
            <label class="control-label" for="reportTable"><h4>Detailed Report:</h4></label>
            <table id="reportTable" class="table table-striped table-hover table-bordered" th:attr="style=${emailHtml != null ? 'border-collapse: collapse; width: 100%;' : ''}">
                <thead>
                <tr th:attr="style=${emailHtml != null ? 'background-color: white;' : ''}">
                    <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Metric</th>
                    <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Group By Dimensions</th>
                    <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Anomaly Info</th>
                    <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Metric Deviation</th>
                    <div th:if="${emailHtml != null}">
                        <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Job Status</th>
                    </div>
                    <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Model Info</th>
                    <div th:if="${instantView == null}">
                        <th th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px;' : ''}">Visualization Link</th>
                    </div>
                </tr>
                </thead>
                <tbody>
                <tr th:each="anomaly: ${Anomalies}" th:attr="style=${emailHtml != null ? 'background-color: #f9f9f9;' : ''}">
                    <td th:text="${anomaly.getMetricInfo()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top; white-space:pre-wrap;' : 'white-space:pre-wrap;'}">Timeseries XYZ</td>
                    <td th:text="${anomaly.getGroupByFilters()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top; white-space:pre-wrap;' : 'white-space:pre-wrap;'}">List of group by dimensions</td>
                    <td th:text="${anomaly.getFormattedAnomalyTimestamps()}" th:styleappend="'color: rgba(255,0,0,0.6)'" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top; white-space:pre-wrap;' : 'white-space:pre-wrap;'}">List of anomalies</td>
                    <td th:utext="${anomaly.getFormattedDeviation()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top; white-space:pre-wrap;' : 'white-space:pre-wrap;'}">Deviation</td>
                    <div th:if="${emailHtml != null}">
                        <td th:text="${anomaly.getStatus()}" th:styleappend="${anomaly.getStatus() == 'success' ? 'color: rgba(100,200,0,1.0)' : 'color: rgba(255,0,0,1.0)'}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;' : ''}">Job status</td>
                    </div>
                    <td th:text="${anomaly.getModelInfo()}" th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top; white-space:pre-wrap;' : 'white-space:pre-wrap;'}">Model Info</td>
                    <div th:if="${instantView == null}">
                        <td th:attr="style=${emailHtml != null ? 'border: 1px solid #ddd; text-align: left; padding: 8px; vertical-align: top;' : ''}">
                            <a th:if="${anomaly.getQueryURL() != null and not #strings.isEmpty(anomaly.getQueryURL())}"
                               target="_blank" class="btn custom-report-btn" th:href="@{${anomaly.getQueryURL()}}">
                                <span class="glyphicon glyphicon-signal"></span> Dashboard
                            </a>
                        </td>
                    </div>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
